<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户管理帮助 - UserHub</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="help-account2.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        success: '#10B981',
                        dark: '#1F2937',
                        neutral: '#F3F4F6'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <!-- 导航内容省略 -->
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 面包屑导航 -->
        <div class="mb-6 text-sm">
            <a href="help-center.html" class="text-gray-500 hover:text-primary">帮助中心</a>
            <span class="mx-2 text-gray-400">/</span>
            <span class="text-gray-900">任务管理</span>
        </div>
        
        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="text-2xl font-bold">任务管理</h1>
            <p class="text-gray-500 mt-1">关于创建任务、设置任务提醒等的详细说明</p>
        </div>
        
        <!-- 目录导航 -->
        <div class="bg-white rounded-xl shadow-sm p-4 mb-8">
            <h3 class="font-medium mb-3">目录</h3>
            <ul class="space-y-2 text-sm">
                <li><a href="#register" class="text-gray-600 hover:text-primary">如何创建新任务？</a></li>
                <li><a href="#password" class="text-gray-600 hover:text-primary">如何设置任务提醒？</a></li>
                <li><a href="#profile" class="text-gray-600 hover:text-primary">如何分享任务给他人？</a></li>
                <li><a href="#delete" class="text-gray-600 hover:text-primary">如何筛选和排序任务？</a></li>
            </ul>
        </div>
        
        <!-- 帮助内容区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 主要内容 -->
            <div class="lg:col-span-2 space-y-12">
                <!-- 注册新账户 -->
                <section id="register" class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-xl font-bold mb-4">如何创建新任务？</h2>
                    
                    <!-- 视频教学 -->
                    <div class="mb-6">
                        <div class="relative aspect-video bg-gray-900 rounded-lg overflow-hidden">
                            <video id="register-video" class="w-full h-full object-cover" poster="屏幕截图 2025-09-10 142228.png">
                                <source src="屏幕录制 2025-09-10 143015.mp4" type="video/mp4">
                                您的浏览器不支持视频播放
                            </video>
                            <div id="register-placeholder" class="absolute inset-0 flex flex-col items-center justify-center text-white">
                                <button id="play-register" class="w-16 h-16 rounded-full bg-primary/90 flex items-center justify-center mb-4 hover:bg-primary transition-colors">
                                    <i class="fa fa-play text-xl"></i>
                                </button>
                                <p class="text-center px-4">点击播放创建任务教程</p>
                            </div>
                            <div id="register-controls" class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 hidden">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center space-x-4">
                                        <button id="register-play-btn" class="text-white hover:text-primary">
                                            <i class="fa fa-play"></i>
                                        </button>
                                        <div class="relative group">
                                            <button class="text-white hover:text-primary text-sm flex items-center">
                                                <span id="register-speed">1.0x</span>
                                                <i class="fa fa-caret-down ml-1"></i>
                                            </button>
                                            <div class="absolute bottom-full left-0 mb-2 bg-dark/95 text-white rounded py-1 w-20 hidden group-hover:block z-10">
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="0.5">0.5x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="0.75">0.75x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.0">1.0x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.25">1.25x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.5">1.5x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="2.0">2.0x</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-white text-sm">
                                        <span id="current-time">00:00</span> / <span id="total-time">00:00</span>
                                    </div>
                                </div>
                                <div class="w-full h-2 bg-white/30 rounded-full overflow-hidden cursor-pointer">
                                    <div id="progress-bar" class="h-full bg-primary w-0 relative">
                                        <div class="progress-handle absolute top-1/2 right-0 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 bg-white rounded-full opacity-0 hover:opacity-100 transition-opacity"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文字说明 -->
                    <div class="space-y-4 text-gray-700">
                        <p>创建新任务非常简单，只需按照以下步骤操作：</p>
                        <ol class="list-decimal pl-5 space-y-2">
                            <li>点击任务页面右上角的“添加任务”按钮</li>
                            <li>填写您负责任务的任务标题</li>
                            <li>确认任务优先级</li>
                            <li>确认任务进行状态和设置截止日期</li>
                            <li>描述任务并新建</li>
                        </ol>
                        <p class="text-gray-500 text-sm">提示：要注意任务的截止时间哦。</p>
                    </div>
                </section>
                
                <!-- 忘记密码 -->
                <section id="password" class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-xl font-bold mb-4">如何设置任务？</h2>
                    
                    <!-- 视频教学 -->
                    <div class="mb-6">
                        <div class="relative aspect-video bg-gray-900 rounded-lg overflow-hidden">
                            <video id="password-video" class="w-full h-full object-cover">
                                <source src="屏幕录制 2025-09-10 143601.mp4" type="video/mp4">
                                您的浏览器不支持视频播放
                            </video>
                            <div id="password-placeholder" class="absolute inset-0 flex flex-col items-center justify-center text-white">
                                <button id="play-password" class="w-16 h-16 rounded-full bg-primary/90 flex items-center justify-center hover:bg-primary transition-colors">
                                    <i class="fa fa-play text-xl text-white"></i>
                                </button>
                            </div>
                            <div id="password-controls" class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 hidden">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center space-x-4">
                                        <button id="password-play-btn" class="text-white hover:text-primary">
                                            <i class="fa fa-play"></i>
                                        </button>
                                        <div class="relative group">
                                            <button class="text-white hover:text-primary text-sm flex items-center">
                                                <span id="password-speed">1.0x</span>
                                                <i class="fa fa-caret-down ml-1"></i>
                                            </button>
                                            <div class="absolute bottom-full left-0 mb-2 bg-dark/95 text-white rounded py-1 w-20 hidden group-hover:block z-10">
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="0.5">0.5x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="0.75">0.75x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.0">1.0x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.25">1.25x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="1.5">1.5x</button>
                                                <button class="speed-option w-full text-left px-3 py-1 hover:bg-primary/20 text-sm" data-speed="2.0">2.0x</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-white text-sm">
                                        <span id="password-current-time">00:00</span> / <span id="password-total-time">00:00</span>
                                    </div>
                                </div>
                                <div class="w-full h-2 bg-white/30 rounded-full overflow-hidden cursor-pointer">
                                    <div id="password-progress-bar" class="h-full bg-primary w-0 relative">
                                        <div class="progress-handle absolute top-1/2 right-0 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 bg-white rounded-full opacity-0 hover:opacity-100 transition-opacity"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文字说明 -->
                    <div class="space-y-4 text-gray-700">
                        <p>如果您要设置任务提醒，可以通过以下步骤重置：</p>
                        <ol class="list-decimal pl-5 space-y-2">
                            <li>在任务页面点击新建任务的同时</li>
                            <li>将任务状态改为紧急</li>
                            <li>设置特定的截止时间</li>
                            <li>在主页显示出紧急任务</li>
                            <li>勾选即可</li>
                        </ol>
                    </div>
                </section>
                
                <!-- 其他部分类似，省略 -->
            </div>
            
            <!-- 侧边栏 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24">
                    <h3 class="font-medium mb-4">需要更多帮助？</h3>
                    <p class="text-sm text-gray-500 mb-4">如果您有其他问题，我们的支持团队可以帮助您</p>
                    
                    <a href="help-center.html#contact" class="block w-full py-2 px-4 bg-primary text-white text-center rounded-lg hover:bg-primary/90 transition-colors text-sm mb-3">
                        联系支持
                    </a>
                    
                    <div class="border-t border-gray-100 pt-4 mt-4">
                        <h4 class="font-medium text-sm mb-2">相关帮助</h4>
                        <ul class="space-y-2 text-sm">
                            <li><a href="task-detail.html" class="text-primary hover:underline">如何分享任务给他人</a></li>
                            <li><a href="tasks.html" class="text-primary hover:underline">如何筛选和排序任务？</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-12">
        <!-- 页脚内容省略 -->
    </footer>

    <script src="help-account2.js"></script>
</body>
</html>
